import Vue from "vue";
import Loading from "./src/main.vue";

let loadingInstance = undefined;
// 使用Vue.extend构造器，创建一个子类loadClass，参数为引入loading组件
const loadClass = Vue.extend(Loading);

Vue.prototype.$close = () => {
  loadingInstance.visible = false;
};

const loading = options => {
  console.log(options);
  if (loadingInstance) {
    loadingInstance.visible = true;
    loadingInstance.text = options;

    return loadingInstance;
  }
  //构建子类属性
  const data = {
    text: options
  };
  // 实例化loadClass,即为Profile,挂载到HTMLElement实例上
  loadingInstance = new loadClass({
    el: document.createElement("div"),
    text: data
  });
  // 插入到body中，loading.vue组件中的template模板内容将会替换挂载的元素，Profile.el中到内容最终为模板到内容
  document.body.appendChild(loadingInstance.$el);
  Vue.nextTick(() => {
    loadingInstance.visible = true;
    loadingInstance.text = options;
  });
  return loadingInstance;
};

export default {
  // 插件install方法
  install: (Vue, options = {}) => {
    // 添加实例方法，挂载到Vue原型
    Vue.prototype.$loading = loading;
    //定义的函数名,若传入参数的话，直接在方法变量后面定义 const loading = ()=>{} or const loading = (options)=>{},耗时一个小时在解决这个问题
  }
};
